<template>
	<view class="images-list">
		<view class="img-wrapper" v-for="(img, index) in images" :key="index">
			<uni-icons class="del-ico" type="minus-filled" :size="24" color="#dd524d"
				@click="delImage(index)"></uni-icons>
			<image class="img" :src="img.url" mode="aspectFill"></image>
			<view class="percent-mask" v-if="img.fail || img.progress < 100">
				<text v-if="!img.fail">{{ img.progress }}%</text>
				<text v-if="img.fail" @click="uploadAgain(index)">点击重试</text>
			</view>
		</view>
		<view class="add-btn" v-if="images.length < count" hover-class="tap-hover" @click="addImage()">
			<uni-icons type="plusempty" :size="30" color="#02C9BF"></uni-icons>
			<text class="upload-text" v-if="uploadText">{{ uploadText }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			count: {
				type: Number,
				default: 1
			},
			uploadText: {
				type: String,
				default: ''
			},
			// 数据编辑时使用,传入照片数组
			imageArr: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				images: [], // 图片临时路径
				online_imgs: [],  // 线上路径地址
				isUpdate: true,
			}
		},
		watch: {
			imageArr: {
				handler(value) {
					if (this.isUpdate) {
						this.images = value.map(url => {
							return {
								url,
								progress: 100,
								fail: false
							}
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 添加图片
			addImage() {
				if (this.isUpdate) {
					this.isUpdate = false
				}
				const diff = this.count - this.images.length
				const count = diff >= 9 ? 9 : diff
				uni.chooseMedia({
					count: count,
					mediaType: ['image'],
					success: async (res) => {
						let temp = []
						const oldLength = this.images.length
						const tempFilePaths = res.tempFiles
						for await (const item of tempFilePaths) {
							if (item.size / 1024 / 1024 > 10) {
								uni.showToast({
									title: '图片不能超过10MB',
									icon: 'none'
								})
							} else {								
								temp.push(item.tempFilePath)
								this.images.push({
									url: item.tempFilePath,
									fail: false,
									progress: 0
								})
							}
						}
						if (temp == false) {
							return
						}
						// 图片逐张上传
						let j = 0
						for await (let item of temp) {
							try {
								const res = await this.$request.upload('/api/file/upload', {
									filePath: item
								}, {
									load: false,
								}, (progress) => {
									this.images[j + oldLength].progress = progress
								})
								if (res.code == 200) {
									this.online_imgs.push(res.data.url)
									this.images[j + oldLength].fail = false
									this.images[j + oldLength].progress = 100
								} else {
									this.images[j + oldLength].fail = true
									this.images[j + oldLength].progress = 0
								}
							} catch {
								this.images[j + oldLength].fail = true
								this.images[j + oldLength].progress = 0
							}
							j += 1
						}
						this.$emit('change', this.online_imgs)
						// 图片同时上传
						/* temp.forEach(async (item, index) => {
							try {
								const res = await this.$request.upload('/api/file/upload', {
									filePath: item
								}, {
									load: false,
								}, (progress) => {
									this.images[index + oldLength].progress = progress
								})
								if (res.code == 200) {
									this.online_imgs.push(res.data.url)
									this.images[index + oldLength].fail = false
									this.images[index + oldLength].progress = 100
								} else {
									this.images[index + oldLength].fail = true
									this.images[index + oldLength].progress = 0
								}
							} catch {
								this.images[index + oldLength].fail = true
								this.images[index + oldLength].progress = 0
							}
						}) */
						// console.log(this.images);
					}
				})
			},
			// 上传失败的图片点击重新上传
			uploadAgain(index) {
				this.images[index].fail = false			
				this.$request.upload('/api/file/upload',
				{
					filePath: this.images[index].url
				}, 
				{
					load: false,
				}, (progress) => {
					this.images[index].progress = progress
				}).then(res => {
					if (res.code == 200) {
						this.online_imgs.splice(index, 0, res.data.url)
						this.images[index].progress = 100
						this.images[index].fail = false
						this.$emit('change', this.online_imgs)
					} else {
						this.images[index].fail = true
						this.images[index].progress = 0
					}
				}).catch(err => {
					this.images[index].fail = true
					this.images[index].progress = 0
				})
			},
			// 删除图片
			delImage(index) {
				if (this.isUpdate) {
					this.isUpdate = false
				}
				this.images.splice(index, 1)
				this.online_imgs.splice(index, 1)
				this.$emit('change', this.online_imgs)
			},
		}
	}
</script>

<style scoped lang="scss">
	.images-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 20rpx;
		column-gap: 20rpx;
	
		.add-btn {
			height: 208rpx;
			border-radius: 30rpx;
			background-color: #f6f6f6;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.upload-text {
				font-size: 24rpx;
				margin-top: 6rpx;
				color: #7B7B7B;
			}
		}
	
		.img-wrapper {
			height: 208rpx;
			border-radius: 30rpx;
			// overflow: hidden;
			position: relative;
	
			.del-ico {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 3;
			}
	
			.img {
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
			}
	
			.percent-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, .5);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				z-index: 2;
				border-radius: 30rpx;
			}
		}
	
	}
</style>